{% extends 'web/template.html' %}

{% block title %}文章详情{% endblock %}
{% block head %}
<style>
    .detail-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
    }

    @media screen and (max-width: 767px) {
        .detail-container {
            padding: 15px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="detail-container">

    {% include 'web/components/文章详情页/文章详情页.html' %}
</div>
{% endblock %}


{% block script %}
<script>
    let title, detail_imgs, play_url;   


    // 修改更新查看器中的图片函数
    function updateViewerImage() {
        const viewerImg = document.getElementById('viewerImage');
        const currentIndexEl = document.getElementById('currentImageIndex');

        // 使用 loadBackgroundImage 解密新的图片
        viewerImg.src = allImages[currentImageIndex];
        currentIndexEl.textContent = currentImageIndex + 1;
    }
    // 修改渲染图片函数
    function renderImages(images, title) {
        allImages = images; // 保存所有图片URL
        const imageContent = document.getElementById('imageContent');
        imageContent.innerHTML = images.map((img, index) => `
        <div class="image-container loading">
            <img class="detail-image" 
                 id="detail-image-${index}"
                 alt="${title} - 图片${index + 1}"
                 onclick="showImageViewer('${img}', ${index})"
                 >
        </div>
    `).join('');

        // 对每张图片进行解密处理
        images.forEach((img, index) => {
            const imgElement = document.getElementById(`detail-image-${index}`);
            imgElement.src = img;
        });
    }

    // 修改显示图片查看器函数
    function showImageViewer(imgSrc, index) {
        currentImageIndex = index;
        const viewer = document.getElementById('imageViewer');
        const viewerImg = document.getElementById('viewerImage');
        const currentIndexEl = document.getElementById('currentImageIndex');
        const totalImagesEl = document.getElementById('totalImages');

        // 使用 loadBackgroundImage 解密查看器中的图片
        viewerImg.src = imgSrc;
        currentIndexEl.textContent = index + 1;
        totalImagesEl.textContent = allImages.length;

        viewer.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    // 加载文章详情
    async function loadArticleDetail() {
        const articleUrl = getArticleUrl();
        if (!articleUrl) {
            showError('文章链接无效');
            return;
        }

        try {
            showLoading();
            const response = await axios.get('api/scraper/hei_liao/line3/get_article_detail/', {
                params: { article_url: articleUrl }
            });

            if (response.data.code === 0) {
                title = response.data.data.title;
                detail_imgs = response.data.data.detail_imgs;
                play_url = response.data.data.play_url;

                // 设置标题
                document.getElementById('articleTitle').textContent = title;
                document.title = title;

                // 只有在有视频链接时才初始化播放器
                if (play_url && play_url) {
                    const videoContainer = document.getElementById('videoContainer');
                    videoContainer.style.display = 'block';
                }

                // 渲染图片
                renderImages(detail_imgs, title);

            } else {
                showError('获取文章详情失败：' + response.data.message);
            }
        } catch (error) {
            showError('获取文章详情失败：' + error.message);
        } finally {
            hideLoading();
        }
    }
</script>
{% endblock %}